<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
import { getLeaderListApi, deleteAdddepartmentApi } from '@/common/apis/organization';
import backgAdd from '@/common/components/backg-department/backg-add.vue';
import { getLeadertreeData } from "@/common/utils/backg-tree";
import { backgExoandNode } from '@/common/utils/backg-expand-node'
import { message } from 'ant-design-vue';

const isModalVisible = ref(false);
const currentNodeId = ref(); // 控制当前点击的 id
const leaderListData = ref<string[]>([]); // 数据初始化为空数组
const actionType = ref('add'); // 操作类型
// 默认展开根节点
const defaultExpandedKeys = ref<string[]>([]);
// 展开状态
const expandedKeys = ref<string[]>([]);

// 操作部门
const operateDept = async (action: string, id: number) => {

  // 定义操作类型进行传值
  actionType.value = action

  if (action === 'add') {
    currentNodeId.value = id; // 新增时设置为 null
    isModalVisible.value = true;
  } else if (action === 'edit') {
    currentNodeId.value = id; // 编辑时设置为选中的 id
    console.log(currentNodeId.value, 'currentNodeId.value')
    isModalVisible.value = true;
  } else if (action === 'del') {
    const res = await deleteAdddepartmentApi(id)
    if (res.data.code === 10000) {
      message.success('删除成功');
      // 重新加载数据
      getLeaderListData()
      console.log('id', id)
    } else {
      message.error(res.data.message)
    }
  }

};

// 获取部门列表数据（树形结构）
const getLeaderListData = async () => {
  const res = await getLeaderListApi();
  const data = res.data.data;
  // 将数据转换为树形结构
  leaderListData.value = getLeadertreeData(data);

  if (leaderListData.value.length > 0) {
    const allKeys = backgExoandNode(leaderListData.value)
    defaultExpandedKeys.value = allKeys; // 默认展开所有节点
    expandedKeys.value = allKeys; // 设置展开状态
  }
};

onMounted(() => {
  getLeaderListData();
});
</script>

<template>
  <a-tree :tree-data="leaderListData" v-model:expandedKeys="expandedKeys" :default-expanded-keys="defaultExpandedKeys">
    <template #title="{ key, name, managerName }">
      <div style=" display: flex; justify-content: space-between; align-items: center; width: 1000px; height: 40px;">
        <span>{{ name }}</span>
        <div>
          <span>{{ managerName }}</span>
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              操作
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="operateDept('add', key)">添加子部门</a-menu-item>
                <a-menu-item @click="operateDept('edit', key)">编辑部门</a-menu-item>
                <a-menu-item @click="operateDept('del', key)">删除部门</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
    </template>
  </a-tree>
  <!-- 提前渲染 backgAdd 组件 -->
  <backgAdd v-model:visible="isModalVisible" :currentNodeId="currentNodeId" @update:visible="isModalVisible = $event"
    :action-type="actionType" @updateDepartment="getLeaderListData" />
</template>

<style lang="scss">
.ant-tree .ant-tree-switcher {
  position: relative;
  flex: none;
  align-self: center;
  width: 24px;
  margin: 0;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
</style>